<script>
    import _ from 'lodash'
    import { findEnumOptions } from '@/api/common.js'
    import { findMeterPropertyByUtilId, updateMeterPropertyByUtilId } from '@/api/measurDevice'

    export default {
        name: 'FormModal',
        props: {
            title: String,
            rowData: Object,
        },
        data() {
            const rowData = this.$props.rowData
            return {
                loading: false,
                formData: {
                    id: rowData?.id || '',
                    name: rowData?.name || '',
                    typeName: rowData?.typeName || '',
                    tableData: [],
                },
                rules: {
                    name: [{ required: true, message: '请输入', trigger: 'change' }],
                    tags: [{ required: true, message: '请输入', trigger: 'change' }],
                },
                tagList: [],
            }
        },
        created() {
            this.initSetModal()
        },
        mounted() {
            this.initData()
        },
        methods: {
            initData() {
                this.loading = true
                findEnumOptions('meterTypePropertyTag').then((result) => {
                    this.tagList = result.data || []
                })
                findMeterPropertyByUtilId(this.formData.id)
                    .then((resp) => {
                        const tableData = resp.data
                        this.formData.tableData = tableData
                        this.$nextTick(() => {
                            const rlTable = this.$refs.rlTable
                            if (rlTable) {
                                rlTable.tableData = tableData
                            }
                        })
                    })
                    .finally(() => {
                        this.loading = false
                    })
            },
            initSetModal() {
                this.$emit('SetTitle', this.$props.title)
                this.$emit('SetPageWidth', 1000)
                this.$emit('SetPageActions', [
                    {
                        text: '保存',
                        theme: 'primary',
                        handle: () => {
                            this.submitForm()
                        },
                        loading: false,
                    },
                    {
                        text: '取消',
                        theme: 'default',
                        handle: () => {
                            this.$emit('Close')
                        },
                    },
                ])
            },
            submitForm() {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        const { tableData, id } = this.formData
                        updateMeterPropertyByUtilId(id, tableData).then((result) => {
                            if (result.code == 200) {
                                this.$message.success(result.msg)
                                this.$emit('Close', true)
                            }
                        })
                    }
                })
            },
        },
    }
</script>
<template>
    <el-form label-position="top" :model="formData" :rules="rules" ref="ruleForm">
        <el-row style="padding-bottom: 18px">
            <el-col :span="6">计量器具名称：{{ formData.name || '--' }}</el-col>
            <el-col :span="6">计量器具类型： {{ formData.typeName || '--' }}</el-col>
        </el-row>
        <RlTable
            v-loading="loading"
            element-loading-background="rgba(0, 0, 0, 0.3)"
            :is-pagination="false"
            :border="false"
            :data="formData.tableData"
            :initData="false"
            :search="false"
            ref="rlTable"
            class="customRlTableClass"
        >
            <template #default>
                <!-- <el-table-column prop="property" label="测点名称" width="300">
                    <template slot-scope="{ row }">
                        {{ row.property }}
                    </template>
                </el-table-column> -->
                <el-table-column prop="defaultName" label="模板测点名称">
                    <template slot-scope="{ row }">
                        {{ row.defaultName }}
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="自定义测点名称">
                    <template slot-scope="scope">
                        <el-form-item :prop="`tableData.${scope.$index}.name`" :rules="rules.name">
                            <el-input
                                v-model="scope.row.name"
                                placeholder="请输入模板测点类型名称"
                            ></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column prop="tags" label="标签">
                    <template slot-scope="scope">
                        <el-form-item :prop="`tableData.${scope.$index}.tags`" :rules="rules.tags">
                            <el-select
                                v-model="scope.row.tags"
                                :clearable="false"
                                placeholder="请选择"
                                style="width: 100%"
                                multiple
                            >
                                <el-option
                                    v-for="item in tagList"
                                    :key="item.code"
                                    :value="item.code"
                                    :label="item.name"
                                />
                            </el-select>
                        </el-form-item>
                    </template>
                </el-table-column>
            </template>
        </RlTable>
    </el-form>
</template>
<style lang="scss" scoped>
    ::v-deep .customRlTableClass {
        &.conataner-resize {
            width: 96% !important;
        }
        .rltable {
            padding: 0 !important;
        }
        .rltable-head {
            margin-bottom: 0 !important;
        }
    }
</style>
